// 如果是从编辑页面跳转过来 ,就可以获取到地址栏中的id
const id = location.search.substr(4)
async function getArticalInfo() {
  const res = await reqArticleInfoGet(id)
  console.log(res)
  // layui中有form.val('表单lay-filter的值', 数据) -- 设置
  form.val('edit', res.data)
  form.render('select', 'edit')
  // 让裁剪插件也替换一下
  // 这样直接替换图片是没有问题的 但是图片地址有问题  /uploads/sdsdsdsds.
  // 需要拼接上服务器的基准路径+图片地址
  cropper.replace(
    'http://api-breakingnews-web.itheima.net' + res.data.cover_img
  )
}

if (id) {
  getArticalInfo()
}

async function getCates() {
  const res = await reqArticleCatesGet()
  console.log(res)
  res.data.forEach(item => {
    // 有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的
    // 可以使用你只需要执行 form.render(type, filter); 方法即可
    const option = `<option value="${item.Id}" lay-verify="cate">${item.name}</option>`
    $('select[name=cate_id]').append(option)
    // 渲染动态创建表单元素 option
    // form.render(type, filter) 参数一是类型 select checkbox radio 参数2是表单lay-filter的值
    form.render('select', 'edit')
  })
  // 重新执行渲染页面默认选中的分类
  getArticalInfo()
}
// 获取分类
getCates()
// 初始化富文本编辑器
initEditor()

// 集成图片裁剪的插件
let cropper
function initCropper() {
  // 1. 集成裁剪插件
  const image = document.getElementById('image') // 获取到要被添加裁剪插件的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 横纵比例
    preview: $('.img-preview'),
  })
}
initCropper()

// 发布文章
$('.layui-form').on('submit', e => {
  e.preventDefault()
  // 创建formData 收集表单信息
  const fd = new FormData($('.layui-form')[0])
  let htmlStr = tinyMCE.activeEditor.getContent() // 富文本编辑器的值
  // console.log(htmlStr)
  // set() 方法会对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。
  fd.set('content', htmlStr)
  // 配置文章封面
  let canvas = cropper.getCroppedCanvas({
    // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
    width: 100,
    height: 100,
  })
  // 调用toBlob 得到blob数据类型
  canvas.toBlob(async function (blobObj) {
    fd.append('cover_img', blobObj)
    if (id) {
      fd.append('Id', id)
      // fd.forEach((value, key) => {
      //   console.log(value, key)
      // })
      // 编辑提交
      const res = await reqArticlEditPost(fd)
      console.log(res)
    } else {
      // 发布
      const res = await reqAddArticlePost(fd)
      console.log(res)
    }
    // 跳转到文章列表
    location.href = '../list/list.html'
  })
})
